<template>
	<view>
		<view class="center-list">
			<view  style="background-color: #F8F8F8;">
				<view class="search-all">
					<img src="../../static/search.png" alt="" class="search-img">
					<input class="search" placeholder="请输入关键字" value=""/>
				</view>
			</view>
			<view class="gap-shadow">
			</view>
			<view class="center-list-item">
				<view class="img-block" style="background-color: #ffa060;">
					<text>
						<img src="../../static/friend_add_fill.png" alt="" class="img-icon">
					</text>	
				</view>
				
				<view style="width: 90%; float: left;" class="gap-shadow-com">	
					<text class="message-name" style="font-style font-variant font-weight font-size/line-height font-family">新的朋友</text>				
				</view>		
			</view>
			<view class="center-list-item">
				<view class="img-block" style="background-color: #00c020;">
					<text>
						<img src="../../static/friends.png" alt="" class="img-icon">
					</text>	
				</view>
				
				<view style="width: 90%; float: left;" class="gap-shadow-com">	
					<text class="message-name" style="font-style font-variant font-weight font-size/line-height font-family">群聊</text>				
				</view>		
			</view>
			<view class="center-list-item">
				<view class="img-block" style="background-color: #0060c0;">
					<text>
						<img src="../../static/sign.png" alt="" class="img-icon">
					</text>	
				</view>
				
				<view style="width: 90%; float: left;" class="gap-shadow-com">	
					<text class="message-name" style="font-style font-variant font-weight font-size/line-height font-family">标签</text>				
				</view>		
			</view>
			<view class="center-list-item">
				<view class="img-block" style="background-color: #ffc0a0;">
					<text>
						<img src="../../static/public-address.png" alt="" class="img-icon">
					</text>	
				</view>
				
				<view style="width: 90%; float: left;" class="gap-shadow-com">	
					<text class="message-name">公众号</text>				
				</view>		
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.search {
		margin-top: 20upx;
		font-size: 25upx;
		
	}
	.search-img{
		height: 40upx;
		width: 40upx;
		margin-top: 10px;
		margin-left: 250upx;
	}
	.search-all {
		width: 730upx;
		height: 65upx;
		margin:0 auto;
		border:1px solid #E6E6E6;
		border-radius:1upx;
		background-color: #ffffff;
	}
	.gap-shadow {
		height: 6px;
		background: #F8F8F8;
	}
	.img-icon{
		height: 55upx;
		width: 55upx;
		margin-top: 14upx;
		margin-left: 12upx;
	}
	.img-block {
		width:85upx;
		height: 85upx;
		
		margin-top: 5upx;
	}
	.gap-shadow-com {
		border-bottom-width: 1upx;
		border-color: #e6e6e6;
		border-bottom-style: solid;	
			margin-left: 20upx;
	}
	.message-name {
		margin-left: 20upx;
		margin-top: 20upx;
	}
</style>
